<template>
  <view class="charts-box">
    <view class="title">
      房间甲醛叠加比例图
    </view>
    <view class="title">
      金米·干净的家为您计算的结果如下：
    </view>
    <qiun-data-charts type="column" :opts="{extra}" :chartData="chartData" :errorReload="false" background="none" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        chartData: {
          "categories": [
            "基础材料",
            "家具",
            "地板",
            "门窗",
            "窗帘布艺",
            "其他材料"
          ],
          "series": [{
            "name": "",
            // 柱状图颜色
            "data": [{
                "value": 0.01,
                "color": "#1890FF"
              },
              {
                "value": 0.02,
                "color": "#FAC858"
              },
              {
                "value": 0.05,
                "color": "#ba59ff"
              },
              {
                "value": 0.08,
                "color": "#91CB74"
              },
              {
                "value": 0.09,
                "color": "#d9ff2f"
              },
              {
                "value": 0.03,
                "color": "#EE6666"
              },
            ],
            "itemStyle": [{
              "normal": [{
                "color": [
                  "#1890FF",
                  "#91CB74",
                  "#FAC858",
                  "#EE6666",
                  "#73C0DE",
                  "#73C0DE",
                ],
              }]
            }]
          }, ]
        },
        // 标记线的位置
        extra: {
          markLine: {
            data: [{
              value: 0.01
            }, {
              value: 0.02
            }, {
              value: 0.03
            }]
          }
        },
        config: {}
      }
    },
    onLoad() {
      // uni.navigateTo({
      //   url: '/pages/share'
      // })
    }
  }
</script>

<style lang="less">
  /* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
  .charts-box {
    margin-top: 300rpx;
    width: 100%;
    height: 300px;

    .title {
      padding-left: 20rpx;
      margin-bottom: 30rpx;
      font-size: 30rpx;
      font-weight: bold;
      text-align: left;
    }
  }
</style>
